<template>
  <view-card :title="title">
    <main class="hot_main">
      <div class="hot_chart" ref="hot_chart"></div>
    </main>
  </view-card>
</template>

<script>
  import {option} from "../charts/musicTimeMachine";
  import api from "../network/api";
  import {handle} from "nightwatch/lib/runner/cli/errorhandler";
  export default {
    name: "hotList",
    data() {
      return {
        title: '音乐时光机',
        machineOption: option
      }
    },
    methods:{
      chartInit(){
        let setChart = this.$echarts.init(this.$refs.hot_chart);
        option && setChart.setOption(this.machineOption);
      },
      getTimeMachine(){
        api.getTimeMachine().then(response => {
          let MachineTime = [];
          let MachineValue = [];
          response['data']['detail'].reverse().filter(item=>{
            let data = item['data']['musicEmotion']['emotions'][0]['detail'];
            MachineTime.push(...data.map(emo=>{
              let time = new Date(emo['day'])
              return `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`
            }));
            MachineValue.push(...data.map(emo=>{
              return emo['percent']
            }));
          })
          this.machineOption['xAxis']['data'] = MachineTime
          this.machineOption['series'][0]['data'] = MachineValue
          this.machineOption['series'][1]['data'] = MachineValue
        })
      }
    },
    mounted(){
      this.chartInit()
      this.getTimeMachine()
    },
    watch:{
      machineOption:{
        handler(newVal,oldVal){
          this.chartInit()
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
